import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

import { MeasureAcreage, MeasureClear, MeasureDistance, measureSelector, MeasureState } from '../../store';

@Component({
  selector: 'ege-map-measure-contianer',
  templateUrl: './map-measure-contianer.component.html',
  styleUrls: ['./map-measure-contianer.component.scss']
})
export class MapMeasureContianerComponent implements OnInit {

  distance$: Observable<boolean>;
  arceage$: Observable<boolean>;

  constructor(
    private store: Store<MeasureState>
  ) { }

  ngOnInit() {
    this.distance$ = this.store.select(measureSelector.getMeasureDistance);
    this.arceage$ = this.store.select(measureSelector.getMeasureAcreage);
  }

  onClickDistance(): void {
    this.store.dispatch(new MeasureDistance());
  }

  onClickAcerage(): void {
    this.store.dispatch(new MeasureAcreage());
  }

  onClickClear(): void {
    this.store.dispatch(new MeasureClear());
  }

}
